<template>
    <div class="head">
        <img src="../assets/images/logo.png" alt="">
        <cube-button icon="cubeic-more" @click="showDrawer"></cube-button>
        <cube-drawer 
        :data="list"
        ref="drawer"
        @cancel="cancelHandler"
        @select="selectHandler">
        </cube-drawer>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isShowDrawer: false,
            list:[
                [
                    {
                        text: '全部课程',
                        value: 0
                    },
                    {
                        text: 'vue课程',
                        value: 1
                    },
                    {
                        text: 'react课程',
                        value: 2
                    }
                ]
            ]
        }
    },
    methods:{
        showDrawer(){
            if(!this.isShowDrawer){
                this.$refs.drawer.show();
                this.isShowDrawer = true;
            }else{
                this.$refs.drawer.hide();
                this.isShowDrawer = false;
            }
        },
        cancelHandler(){
            // console.log("隐藏drawer");
            this.isShowDrawer = false;
        },
        selectHandler(selectedVal, selectedIndex, selectedText){
            console.log(selectedVal);
            console.log(selectedIndex);
            console.log(selectedText);
            this.isShowDrawer = false;
        }
    }
}
</script>
<style lang="stylus">
.head
    height 46px
    background-color #000
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    img
        height 28px
        width auto
        margin 9px 13px
    button
        background-color #000
        width 45px
        height 46px
.cube-drawer
    margin-top 46px
</style>
